<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function preImg(file){
            if(typeof FileReader =="undefined"){
                alert('当前不支持图片预览');
                return;
            }
            document.getElementById('img1').style.display='block';
            var read=new FileReader();//实例化文件预览对象
            read.readAsDataURL(file);
            read.onload=function (e){
                document.getElementById('img1').src=e.target.result;
            }
        }
    </script>
</head>
<body>
  <center>
      <h3>单文件上次</h3>
      <form action="upload" enctype="multipart/form-data" method="post">
        <input name="file1" onchange="preImg(this.files[0])" type="file"><br>
        <img id="img1" src="" style="width: 100px;height: 100px;display: none;"><br>
        <button type="submit">上传</button>
      </form>
      <hr>

      <h3>多文件上次List1</h3>
      <form action="upload2" enctype="multipart/form-data" method="post">
          <input name="filem" type="file"><br>
          <input name="filem" type="file"><br>
          <button type="submit">上传</button>
      </form>
      <hr>

      <h3>多文件上次List2</h3>
      <form action="upload2" enctype="multipart/form-data" method="post">
          <input accept="image/*" multiple name="filem" type="file"><br>
          <button type="submit">上传</button>
      </form>
      <hr>

      <h3>多文件上次Map</h3>
      <form action="upload3" enctype="multipart/form-data" method="post">
          <input accept="image/*"  name="file1" type="file"><br>
          <input accept="image/*"  name="file2" type="file"><br>
          <button type="submit">上传</button>
      </form>
      <hr>
      <div>[[${msg}]]</div>
  </center>
</body>
</html>
